<template>
    <el-container>
        <el-header style="height: 130px">
          <div class="title"><span>行为决策实验平台</span></div>
         <headT></headT>
      </el-header>
        <el-main>
            <timeT ref="timeT"></timeT>
            <div class="content">
                <div class="card">
                    <div class="card-header">
                    <el-image :src="require('@/assets/jijin1.png')"></el-image>
                    <span>基金Ⅰ</span>
                    <el-button class="yes" @click="toTj(1)">查看</el-button>
                    </div>
                    <div>拟任基金经理ZHAO</div>
                </div>
                <div class="card">
                    <div class="card-header">
                    <el-image :src="require('@/assets/jijin2.png')"></el-image>
                    <span>基金Ⅱ</span>
                    <el-button class="yes"  @click="toTj(2)">查看</el-button>
                    </div>
                    <div>拟任基金经理LI</div>
                </div>
                <div class="card">
                    <div class="card-header">
                    <el-image :src="require('@/assets/jijin3.png')"></el-image>
                    <span>基金Ⅲ</span>
                    <el-button class="yes"  @click="toTj(3)">查看</el-button>
                    </div>
                    <div>拟任基金经理GUO</div>
                </div>
            </div>
            <div class="choice">
            <div class="text"><span>请您决定是否查看本轮市场价格走势?</span></div></div>
            <el-button class="no" @click="toXX">不查看</el-button>
        </el-main>
        <footerT></footerT>
    </el-container>
</template>

<script>
import {endTime} from "@/api/stage";
import {round} from "@/api/usingTime";
import {getStart2} from "@/api/usingTime";
import {listFundsSelective} from "@/api/funds";
import timeT from '@/components/time.vue'
import footerT from '@/components/footer.vue'
import headT from '@/components/headT.vue'
import {selectAllByExperimentId} from "@/api/Initial";

let a = [100]
let b = [100]
let c = [100]
export default{
  name: 'choice',
  components:{
    timeT,
    footerT,
    headT
  },
  data(){
    return{
      queryParams: {
        id: 0,
        stageId: 0,
        roundId: 0,
        userId: 0,
      },
      timeEarnings: {
        stage_id: 0,
        round_id: 0,
        user_id: 0,
      },
      stage: {
        stageId: 0,
        userId: 0,
        stageTotalTime: '0'
      },
      rId: 1,
    }
  },
  mounted() {
    if(this.$cookies.get('roundId') == null){
      selectAllByExperimentId(parseInt(this.$cookies.get('sites'))).then(res => {
        a = [res.data.data.all.fundoneInitial]
        b = [res.data.data.all.fundtwoInitial]
        c = [res.data.data.all.fundthreeInitial]
      })
    }
    this.queryParams.stageId = this.$cookies.get('stageId') == null ? 1 : parseInt(this.$cookies.get('stageId'))
    this.queryParams.roundId = this.$cookies.get('roundId') == null ? 1 : parseInt(this.$cookies.get('roundId'))
    this.queryParams.userId = parseInt( this.$cookies.get('userId') )
    listFundsSelective(this.queryParams).then(res => {
      if(a.length == this.queryParams.roundId && b.length == this.queryParams.roundId && c.length == this.queryParams.roundId){
        a.push(res.data.data.FundsSelective[0].fundPoint)
        this.$cookies.set('fundOne',a)
        b.push(res.data.data.FundsSelective[1].fundPoint)
        this.$cookies.set('fundTwo',b)
        c.push(res.data.data.FundsSelective[2].fundPoint)
        this.$cookies.set('fundThree',c)
      }
    })
  },
  methods:{

    // 时间差计算
    difference(beginTime, endTime) {
      var dateBegin = new Date(beginTime);
      var dateEnd = new Date(endTime);
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      console.log(
          "相差" +
          dayDiff +
          "天" +
          hours +
          "小时" +
          minutes +
          "分钟" +
          seconds +
          "秒"
      );
      return dayDiff +
          "天" +
          hours +
          "小时" +
          minutes +
          "分钟" +
          seconds +
          "秒"
    },

    //不查看
      toXX(){
        this.timeEarnings.stage_id = this.$cookies.get('stageId') == null ? 1 : parseInt(this.$cookies.get('stageId'))
        this.timeEarnings.round_id = this.$cookies.get('roundId') == null ? 1 : parseInt(this.$cookies.get('roundId'))
        this.timeEarnings.user_id = parseInt( this.$cookies.get('userId') )
        round(this.timeEarnings).then(res => {
          console.log(res)
        })
        if(this.queryParams.roundId == 12){
          console.log('true')
          a = [100]
          b = [100]
          c = [100]
          this.$cookies.remove('fundOne')
          this.$cookies.remove('fundTwo')
          this.$cookies.remove('fundThree')
          var start = this.$cookies.get('startStage')
          var totalTime = this.difference(start,new Date())
          this.stage.stageId = this.$cookies.get('stageId') == null ? 1 : parseInt(this.$cookies.get('stageId'))
          this.stage.userId = parseInt( this.$cookies.get('userId') )
          this.stage.stageTotalTime = totalTime
          endTime(this.stage).then(res => {
            console.log(res)
          })
        }
        this.$nextTick(() => {
          this.$refs["timeT"].changeRoundId();
        })
        this.$router.push({
          path: '/scroll',
        })
      },
    //查看
      toTj(fundId){
      getStart2().then(res => {
        console.log(res)
      })
        this.$router.push(
            {
              path: '/tongji',
              query: {
                "fId": fundId
              }
            }
        )
      }
  }
}


</script>

<style scoped>
.el-header{
      padding: 0;
  }

  .title{
      height: 100px;
      color: aliceblue;
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      font-weight: 800;
      background-image: linear-gradient(
        DodgerBlue,
        DeepSkyBlue
      );
    }

    .round{
      height: 29px;
      box-sizing: content-box;
      border-bottom: 2px solid #dcdcdc;
      padding-left: 150px;
      line-height: 29px;
      font-size: 10px;
      font-weight: 600;
    }

    .el-main {
      /* background-color: #E9EEF3; */
      background-color: aliceblue;
      color: #333;
      text-align: center;
      height: 560px;
    }

    .content{
      width:1000px ;
      height: 170px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    .card{
      width: 300px;
      height: 150px;
      background-color: #fff;
      box-shadow: 0 2px 10px 3px #0099FC;
      font-weight: 800;
      line-height: 50px;
      border-radius: 10px;
    }

    .el-image{
      width: 30px;
      height:30px;
      vertical-align: middle;
      margin-right: 10px;
    }

    .choice{
        width: 1100px;
        padding-top: 50px;
        height: 100px;
        margin: 0 auto;
    }

    .text{
        color: #333;
        font-size: 30px;
        font-weight: 800;
    }

    button{
        width: 200px;
        height: 40px;
        color: #333;
        font-size: 20px;
        font-weight: 700;
        border: none;
        border-radius: 10px;
        background-color: #0099FC;
    }

    .no:hover{
        background-color:LightSkyBlue;
        color: #333;
    }

    .yes{
        font-size: 14px;
        margin: 0;
        padding: 0;
        width:70px;
        height: 25px;
        font-weight: 700;
        margin-left: 20px;
        vertical-align: middle;
    }

    .yes:hover{
        background-color:LightSkyBlue;
        color: #333;
    }
</style>
